<template>

  <CommonContainer title="还车结算">
    <div>
      <el-form ref="form4" :disabled="disabled" :model="form" :rules="rules" label-width="100px" label-position="top">
        <el-descriptions>
          <el-descriptions-item label="还车类别"  :span="3">
            <dict-tag :options="dict.type.return_car_type" :value="form.returnCategory"/>
          </el-descriptions-item>
          <el-descriptions-item label="还车时间">{{ form.returnTime|filterNull }}</el-descriptions-item>
          <el-descriptions-item label="还车里程数(km)">{{ form.returnMileage|filterNull }}</el-descriptions-item>
          <el-descriptions-item label="还车油量(%)">{{ form.returnFuel|filterNull }}</el-descriptions-item>
          <el-descriptions-item label="已履行租期">{{ form.fulfilledLeaseTerm|filterNull }}</el-descriptions-item>
          <el-descriptions-item label="行驶里程数(km)">{{ form.drivingMileage|filterNull }}</el-descriptions-item>
          <el-descriptions-item label="油量差值(%)">{{ oilVolumeDiff|filterNull }}</el-descriptions-item>
          <el-descriptions-item v-if="form.returnCategory == 1" label="违约原因">
            <dict-tag :options="dict.type.return_car_breach" :value="form.defaultReason"/>
          </el-descriptions-item>
          <el-descriptions-item label="还车原因">{{ form.reasonForReturningTheCar|filterNull }}</el-descriptions-item>
          <el-descriptions-item label="验车方式" :span="form.returnCategory == 1?1:2">
            <dict-tag :options="dict.type.vehicle_inspection_method" :value="form.vehicleInspectionMethod"/>
          </el-descriptions-item>

          <el-descriptions-item label="还车附件" :span="3">
            <image-common disabled v-model="form.returnAccessories" :up-type="2"></image-common>
          </el-descriptions-item>
          <el-descriptions-item label="还车单" :span="3">
            <image-common disabled v-model="form.returnSlip" :up-type="2"></image-common>
          </el-descriptions-item>
        </el-descriptions>
        <el-row :gutter="10" v-if="form.vehicleInspectionMethod == 1">
          <el-col :span="24">
            <p class="subtitle">还车车况</p>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车前:" prop="carFront">
              <image-common :disabled="disabled" v-model="form.carFront" :up-type="2" :limit="5" info="车前照"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车后:" prop="carRear">
              <image-common :disabled="disabled" v-model="form.carRear" :up-type="2" :limit="5" info="车后照"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车左:" prop="carLeft">
              <image-common :disabled="disabled" v-model="form.carLeft" :up-type="2" :limit="5" info="车左照"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车右:" prop="carRight">
              <image-common :disabled="disabled" v-model="form.carRight" :up-type="2" :limit="5" info="车右照"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仪表盘:" prop="dashboard">
              <image-common :disabled="disabled" v-model="form.dashboard" :up-type="2" :limit="5" info="仪表盘照"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="其他:" prop="other">
              <image-common :disabled="disabled" v-model="form.other" :up-type="2" info="其他照"></image-common>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-table
                :data="form.orderReturnDamage"
                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>

              <el-table-column
                  align="center"
                  prop="vehicleDamageItem"
                  label="车损项"
                  min-width="180">
                <template v-slot="{row}">
                  <el-select v-model="row.vehicleDamageItem" placeholder="请选择车损项">
                    <el-option v-for="dict in dict.type.return_car_damage_type" :label="dict.label" :value="parseInt(dict.value)"
                               :key="dict.value"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleDamageDetail"
                  label="车损详情"
                  min-width="180">
                <template v-slot="{row}">
                  <el-input v-model="row.vehicleDamageDetail" placeholder="请输入" clearable/>
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleDamageFee"
                  label="预估车损费"
                  min-width="180">
                <template v-slot="{row}">
                  <amount-input v-model="row.vehicleDamageFee"  placeholder="请输入"/>
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleDamageRemark"
                  label="备注"
                  min-width="180">
                <template v-slot="{row}">
                  <el-input v-model="row.vehicleDamageRemark" placeholder="请输入" clearable/>
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="fieldDict"
                  label="操作"
                  fixed="right"
                  min-width="100">
                <template v-slot="{$index}">
                  <el-button type="danger" icon="el-icon-delete" circle @click="deleteDamages($index)"></el-button>
                </template>
              </el-table-column>

              <template v-slot:append>
                <div class="flex-xy-center" style="height: 30px">
                  <el-button type="text" icon="el-icon-plus" @click="adddDamages">添加车损项</el-button>
                </div>
              </template>
            </el-table>
          </el-col>

        </el-row>
        <el-row :gutter="10" v-else>
          <el-col :span="24">
            <div class="flex-row-center-sb">
              <p class="subtitle">车辆检测信息</p>
              <p style="color: #1890ff;font-size: 13px;" @click="handleThirdPartyTesting">验车项明细</p>
            </div>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车损费:" prop="vehicleDamageFee">
              <amount-input v-model.number="form.vehicleDamageFee"  placeholder="请输入车损费"></amount-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车损说明:" prop="vehicleDamageDescription">
              <el-input type="textarea" placeholder="请输入说明" v-model="form.vehicleDamageDescription" maxlength="500" :rows="4" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="上传验车单:" prop="acceptanceForm">
              <image-common :disabled="disabled" :up-type="2" v-model="form.acceptanceForm" info="上传验车单"></image-common>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <p class="subtitle">违章信息</p>
          </el-col>
          <el-col :span="8">
            <el-form-item label="违章分数:" prop="violationScore">
              <el-input v-model.number="form.violationScore" onkeyup="value=value.replace(/[^\d||/.]/g,'')"
                        oninput="if(value){value=value.replace(/[^\d]/g,'')}  if(value>12){value=12}"
                        :maxlength="2"
                        :minlength="1" placeholder="请输入违章分数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="违章费用:" prop="violationFee">
              <amount-input v-model.number="form.violationFee" placeholder="请输入违章费用"></amount-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="违章附件:" prop="violationAttachment">
              <image-common :disabled="disabled" :up-type="2" v-model="form.violationAttachment" info="违章附件"></image-common>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <p class="subtitle">扣款费用</p>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆租金欠款金额:" prop="rentArrears">
              <amount-input v-model.number="form.rentArrears"  placeholder="请输入车辆租金欠款金额"></amount-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="剩余租期:" prop="remainingLeaseTerm">
              <el-input v-model="form.remainingLeaseTerm" disabled ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="form.returnCategory == 1">
            <el-col :span="8">
              <el-form-item label="违约金:" prop="defaultDeduction">
                <amount-input v-model="form.defaultDeduction"  placeholder="请输入违约金"></amount-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="违约金减免:" prop="defaultReduction">
                <amount-input v-model="form.defaultReduction"  placeholder="请输入违约金减免"></amount-input>
              </el-form-item>
            </el-col>
          </template>

          <el-col :span="8">
            <el-form-item label="加速折旧费:" prop="depreciation">
              <amount-input v-model.number="form.depreciation"  placeholder="请输入加速折旧费"></amount-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="超里程数(km):" prop="overMileage">
              <el-input v-model.number="form.overMileage" type="number" placeholder="请输入超里程数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="超里程费:" prop="overMileageFee">
              <amount-input v-model.number="form.overMileageFee"  placeholder="请输入超里程费"></amount-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <p class="subtitle">自定义扣款项</p>
          </el-col>
          <el-table
              :data="form.orderReturnDeduction"
              :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>

            <el-table-column
                align="center"
                prop="deductionName"
                label="扣款项名称"
                min-width="180">
              <template v-slot="{row}">
                <el-input v-model="row.deductionName" placeholder="扣款项名称" clearable/>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="deductionAmount"
                label="扣款金额"
                min-width="180">
              <template v-slot="{row}">
                <amount-input v-model="row.deductionAmount" placeholder="请输入扣款金额"/>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="deductionReason"
                label="扣款原因"
                min-width="180">
              <template v-slot="{row}">
                <el-input v-model="row.deductionReason" placeholder="请输入扣款原因" clearable/>
              </template>
            </el-table-column>

            <el-table-column
                align="center"
                prop="fieldDict"
                label="操作"
                fixed="right"
                min-width="100">
              <template v-slot="{$index}">
                <el-button type="danger" icon="el-icon-delete" circle @click="deleteDeductPayment($index)"></el-button>
              </template>
            </el-table-column>
            <template v-slot:append>
              <div class="flex-xy-center" style="height: 30px">
                <el-button type="text" icon="el-icon-plus" @click="adddDuctPayments">添加扣款项</el-button>
              </div>
            </template>
          </el-table>
        </el-row>
      </el-form>

    </div>
  </CommonContainer>


</template>

<script>
import NumberInput from "@/components/NumberInput/NumberInput.vue";
import { queryReport } from '@/api/returnCar/returnCar'
export default {
  dicts: ['return_car_damage_type', 'return_car_breach', 'return_car_type', 'vehicle_inspection_method'],
  components: {NumberInput},
  props: {
    value: {
      default: {},
    },
    state: {
      default: "readonly",
    },
  },
  computed: {
    // fulfilledLeaseTerm(){
    //   let outboundDate = this.form?.outboundVehicleCondition.outboundDate;
    //   const date1 = new Date(outboundDate);
    //   const date2 = new Date(this.form.returnTime);
    //   if(!date1||!this.form.returnTime){
    //     return "--"
    //   }
    //   let months = (date2.getFullYear() - date1.getFullYear()) * 12;
    //   months -= date1.getMonth();
    //   months += date2.getMonth();
    //   const dateDiff = date2.getDate() - date1.getDate();
    //   if (dateDiff < 0) {
    //     months--;
    //   }
    //   if(months<0||(months===0&&dateDiff<0)){
    //     return "0日"
    //   }else{
    //     if(months===0){
    //       return `${dateDiff > 0 ? dateDiff : 1}日`;
    //     }else{
    //       return `${months}月${dateDiff > 0 ? dateDiff : 0}日`;
    //     }
    //   }
    // },
    form: {
      get() {
        console.log('我是组件工作流待办详情-------', this.value)
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    oilVolumeDiff() {
      //油量差值=还车油量-出库油量
      return Number(this.form.returnFuel) - Number(this.form.outboundFuel)
    }
  },
  data() {
    const validateValue = (rule, value, callback) => {
      const defaultDeduction = this.form?.defaultDeduction || 0
      if (value > Number(defaultDeduction)) {
        console.log('进来了', defaultDeduction)
        callback(new Error('违约金减免不能大于违约金'));
      } else {
        callback();
      }
    };
    return {
      disabled: false,
      rules: {
        carFront: [
          {required: true, message: '请上传车前照', trigger: 'blur'},
        ],
        carRear: [
          {required: true, message: '请上传车后照', trigger: 'blur'},
        ],
        carLeft: [
          {required: true, message: '请上传车左照', trigger: 'blur'},
        ],
        carRight: [
          {required: true, message: '请上传车右照', trigger: 'blur'},
        ],
        dashboard: [
          {required: true, message: '请上传仪表盘照', trigger: 'blur'},
        ],
        violationScore: [
          {
            pattern: /^([0-9][1-2]{0,1})$/,
            message: "请输入0-12的整数",
            trigger: "blur"
          }
        ],
        defaultReduction: [
          { required: false, validator: validateValue, trigger: 'blur'}
        ],

        violationAttachment: [
          {required: true, message: '请上传违章附件', trigger: 'blur'},
        ],

      },
    }
  },
  methods: {
    adddDuctPayments() {
      const obj = {
        deductionName: null,
        deductionAmount: null,
        deductionReason: null
      }
      this.form.orderReturnDeduction.push(obj)
    },
    deleteDeductPayment(index) {
      this.form.orderReturnDeduction.splice(index, 1)
    },

    adddDamages() {
      const obj = {
        vehicleDamageItem: null,
        vehicleDamageDetail: null,
        vehicleDamageFee: null,
        vehicleDamageRemark: null
      }
      this.form.orderReturnDamage.push(obj)
    },
    deleteDamages(index) {
      this.form.orderReturnDamage.splice(index, 1)
    },
    handleThirdPartyTesting() {
      queryReport(this.form.thirdPartyUrl).then(res => {
        let url = res.data
        if(url){
          window.open(url, '_blank')
        }else{
          this.$message.error("暂无第三方检测报告");
        }
      })
    },
    saveForm() {
      let flag = false
      this.$refs['form4'].validate((valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    }


  },
  created() {
    if (this.$route.query.status && this.$route.query.status == 'readonly') {
      this.disabled = true
    }
    console.log('status', this.$route.query.status);
  },

}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.subtitle {
  font-size: 14px;
  font-weight: bold;
  color: #333333;

  &::before {
    display: inline-block;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: $primary;
    margin-right: 5px;
    position: relative;
    top: -1px;
  }
}

::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}
</style>
